import classnames from 'classnames'
// import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { NewsType } from '@/store/reducer/channel'
import { Image } from 'antd-mobile'
import history from '@/utils/history'
import { useDispatch } from 'react-redux'
import dayjs from 'dayjs'

export default function ArticleItem({ data }: { data: NewsType }) {
  const { type, images } = data.cover
  const dispatch = useDispatch()
  return (
    <div className={styles.root}
      onClick={() => {
        dispatch({ type: 'channel/setSroolNum', payload: document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop })
        history.push(`/Article/${data.art_id}`)
      }}>
      {/* t3: 三图结构 none-mt没有图片结构  */}
      <div
        className={classnames('article-content', {
          t3: type === 3,
          'none-mt': type === 0,
        })}
      >
        <h3>{data.title}</h3>
        {type !== 0 && (
          <div className='article-imgs'>
            {images.map((item, index) => (
              <div className='article-img-wrapper' key={index}>
                <Image src={item} alt='' lazy />
              </div>
            ))}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 ? 'none-mt' : '')}>
        <span>{data.aut_name}</span>
        <span>{data.comm_count}评论</span>
        <span>{dayjs().from(data.pubdate)}</span>

        {/* <span className='close'>
          <Icon type='iconbtn_essay_close' />
        </span> */}
      </div>
    </div>
  )
}